var gl;
var points=[];
var colors=[];
var numPoints=0;
var linePoints=0;

window.onload=function init(){

    var canvas=document.getElementById("gl-canvas");

    gl=WebGLUtils.setupWebGL(canvas);
    if(!gl){
        alert("WebGL isn't available");
    }

    // define base colors
    var red=vec4(1,0.4,0.4,1);
    var pink=vec4(1,0.8,0.8,1);
    var white=vec4(1,1,1,1);
    var brown=vec4(1,0.8,0.6,1);
    var black=vec4(0,0,0,1);

    // draw a rabbit's ears
    rectangle(vec2(-0.25,0),0.25,0.66,white);
    rectangle(vec2(0.25,0),0.25,0.66,white);
    rectangle(vec2(-0.25,0),0.15,0.56,pink);
    rectangle(vec2(0.25,0),0.15,0.56,pink);

    // draw a rabbit's face
    rectangle(vec2(0,-0.33),1,0.66,white);
    
    // draw a rabbit's nose
    circle(vec2(0,-0.33),0.03,100,brown);

    // draw a rabbit's eyes
    circle(vec2(-0.25,-0.25),0.03,100,black);
    circle(vec2(0.25,-0.25),0.03,100,black);

    // draw a rabbit's mouth
    semi_circle(vec2(0.04,-0.36),0.04,100,"down",black);
    semi_circle(vec2(-0.04,-0.36),0.04,100,"down",black);

    gl.viewport(0,0,canvas.width,canvas.height);
    gl.clearColor(0.8, 0.9, 1.0, 1.0);

    program=initShaders(gl, "vertex-shader", "fragment-shader");
    gl.useProgram(program);

    var cbuffer=gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);

    var vColor=gl.getAttribLocation(program, "vColor");
    gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vColor);

    var vbuffer=gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);

    var vPosition=gl.getAttribLocation(program, "vPosition");
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vPosition);
    render();
}

function render(){
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, numPoints);
    gl.drawArrays(gl.LINE_STRIP, numPoints, linePoints);
}

// function to draw a triangle with three specified points and color
function triangle(a,b,c,color){
    points.push(a,b,c);
    colors.push(color,color,color);
}

// function to draw a rectangle with specified center, width, height and color
function rectangle(center, width, hight, color){
    var a=vec2(center[0]-width/2, center[1]+hight/2);
    var b=vec2(center[0]+width/2, center[1]+hight/2);
    var c=vec2(center[0]-width/2, center[1]-hight/2);
    var d=vec2(center[0]+width/2, center[1]-hight/2);

    points.push(a,b,c);
    colors.push(color,color,color);
    points.push(b,c,d);
    colors.push(color,color,color);

    numPoints=numPoints+6
}

// function to draw a circle with specified center, radius, precision and color
function circle(center, radius, precision, color){
    var num=precision*3;
    var angle=2*Math.PI/num;
    var carry=[];

    for(var i=0;i<=num;++i){
        var a=Math.cos(angle*i)*radius+center[0];
        var b=Math.sin(angle*i)*radius+center[1];

        carry.push(vec2(a,b));
    }

    for(var j=0;j<num;++j){
        points.push(carry[j],carry[j+1],center);
        colors.push(color,color,color);
        numPoints=numPoints+3;
    }
}

//function to draw semi-circle with specified center, radius, precision, direction and color
function semi_circle(center, radius, precision, direction, color){
    var num=precision*3;
    var angle;

    if(direction=="up"){
        angle=Math.PI/num;
    }

    if(direction=="down"){
        angle=-Math.PI/num;
    }

    for(var i=0;i<=num;++i){
        var a=Math.cos(angle*i)*radius+center[0];
        var b=Math.sin(angle*i)*radius+center[1];

        points.push(vec2(a,b));
        colors.push(color);
        linePoints=linePoints+1;
    }
}